<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户逾期统计分析</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .filter-section {
            background: #f8f9fa;
            padding: 20px 30px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .filter-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-item label {
            font-weight: 500;
            color: #495057;
            font-size: 14px;
        }
        
        .filter-item input,
        .filter-item select {
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }
        
        .filter-item input:focus,
        .filter-item select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .btn {
            padding: 8px 20px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        .content {
            padding: 30px;
        }
        
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .summary-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            padding: 20px;
            border-radius: 10px;
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .summary-card h3 {
            font-size: 14px;
            margin-bottom: 10px;
            opacity: 0.9;
        }
        
        .summary-card .value {
            font-size: 28px;
            font-weight: bold;
        }
        
        .table-container {
            overflow-x: auto;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        
        thead {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            position: sticky;
            top: 0;
        }
        
        td {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            font-size: 14px;
        }
        
        tbody tr {
            transition: all 0.2s;
        }
        
        tbody tr:hover {
            background: #f8f9fa;
            transform: scale(1.01);
        }
        
        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-success {
            background: #d4edda;
            color: #155724;
        }
        
        .badge-warning {
            background: #fff3cd;
            color: #856404;
        }
        
        .badge-danger {
            background: #f8d7da;
            color: #721c24;
        }
        
        .level-badge {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
            color: white;
        }
        
        .level-1 { background: #FFFFFF; color: #333; border: 1px solid #ddd; }
        .level-2 { background: #FFE4B5; color: #333; }
        .level-3 { background: #FFA500; color: white; }
        .level-4 { background: #FF0000; color: white; }
        .level-5 { background: #8B0000; color: white; }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #6c757d;
        }
        
        .empty {
            text-align: center;
            padding: 50px;
            color: #6c757d;
        }
        
        .detail-cell {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        
        .customer-name {
            font-weight: 600;
            color: #667eea;
        }
        
        .amount {
            font-weight: 600;
            color: #dc3545;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 5px;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 11px;
            font-weight: 600;
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📊 客户逾期统计分析</h1>
            <p>按客户分析账期情况，实时监控各逾期等级的订单数量和金额</p>
        </div>
        
        <div class="filter-section">
            <div class="filter-group">
                <div class="filter-item">
                    <label>客户ID:</label>
                    <input type="number" id="customerId" placeholder="输入客户ID">
                </div>
                <div class="filter-item">
                    <label>客户名称:</label>
                    <input type="text" id="customerName" placeholder="输入客户名称">
                </div>
                <div class="filter-item">
                    <label>台账:</label>
                    <select id="regionId">
                        <option value="">全部</option>
                        <option value="0">寿光</option>
                        <option value="1">河北</option>
                        <option value="2">聊城</option>
                        <option value="3">云南</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>开始时间:</label>
                    <input type="date" id="startTime">
                </div>
                <div class="filter-item">
                    <label>结束时间:</label>
                    <input type="date" id="endTime">
                </div>
                <button class="btn btn-primary" onclick="loadData()">🔍 查询</button>
                <button class="btn btn-secondary" onclick="resetFilter()">🔄 重置</button>
            </div>
        </div>
        
        <div class="content">
            <div id="summaryCards" class="summary-cards"></div>
            
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>客户信息</th>
                            <th>预警设置</th>
                            <th>总体情况</th>
                            <th>15天以内</th>
                            <th>15-29天</th>
                            <th>30-59天</th>
                            <th>60-89天</th>
                            <th>90天以上</th>
                            <th>风险等级</th>
                        </tr>
                    </thead>
                    <tbody id="dataTable">
                        <tr>
                            <td colspan="9" class="loading">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载时自动查询
        window.onload = function() {
            loadData();
        };
        
        // 加载数据
        function loadData() {
            const params = new URLSearchParams();
            
            const customerId = document.getElementById('customerId').value;
            const customerName = document.getElementById('customerName').value;
            const regionId = document.getElementById('regionId').value;
            const startTime = document.getElementById('startTime').value;
            const endTime = document.getElementById('endTime').value;
            
            if (customerId) params.append('customerId', customerId);
            if (customerName) params.append('customerName', customerName);
            if (regionId !== '') params.append('regionId', regionId);
            if (startTime) params.append('startTime', startTime);
            if (endTime) params.append('endTime', endTime);
            
            fetch('/finance/customerCollectionAlertRecord/customerStatistics?' + params.toString())
                .then(response => response.json())
                .then(result => {
                    if (result.code === 0) {
                        renderSummary(result.data);
                        renderTable(result.data);
                    } else {
                        alert('查询失败: ' + result.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('查询失败: ' + error.message);
                });
        }
        
        // 渲染汇总卡片
        function renderSummary(data) {
            if (!data || data.length === 0) {
                document.getElementById('summaryCards').innerHTML = '';
                return;
            }
            
            const totalCustomers = data.length;
            const totalOrders = data.reduce((sum, item) => sum + item.totalOrderCount, 0);
            const totalUnreceived = data.reduce((sum, item) => sum + item.totalUnreceivedAmount, 0);
            const highRiskCount = data.filter(item => item.level5Count > 0).length;
            
            const html = `
                <div class="summary-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3>客户总数</h3>
                    <div class="value">${totalCustomers}</div>
                </div>
                <div class="summary-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3>逾期订单总数</h3>
                    <div class="value">${totalOrders}</div>
                </div>
                <div class="summary-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <h3>未回款总金额</h3>
                    <div class="value">¥${totalUnreceived.toFixed(2)}</div>
                </div>
                <div class="summary-card" style="background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);">
                    <h3>高风险客户</h3>
                    <div class="value">${highRiskCount}</div>
                </div>
            `;
            
            document.getElementById('summaryCards').innerHTML = html;
        }
        
        // 渲染表格
        function renderTable(data) {
            const tbody = document.getElementById('dataTable');
            
            if (!data || data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="9" class="empty">暂无数据</td></tr>';
                return;
            }
            
            const rows = data.map(item => `
                <tr>
                    <td>
                        <div class="detail-cell">
                            <span class="customer-name">${item.customerName}</span>
                            <span style="font-size: 12px; color: #6c757d;">ID: ${item.customerId}</span>
                            <span style="font-size: 12px; color: #6c757d;">${getRegionName(item.regionId)}</span>
                        </div>
                    </td>
                    <td>
                        <div class="detail-cell">
                            <span class="badge ${getAlertLevelClass(item.alertLevel)}">${getAlertLevelName(item.alertLevel)}</span>
                            <span style="font-size: 12px; color: #6c757d;">${item.alertDays}天</span>
                        </div>
                    </td>
                    <td>
                        <div class="detail-cell">
                            <div class="detail-item">
                                <span>订单数:</span>
                                <strong>${item.totalOrderCount}</strong>
                            </div>
                            <div class="detail-item">
                                <span>未回款:</span>
                                <span class="amount">¥${item.totalUnreceivedAmount.toFixed(2)}</span>
                            </div>
                            <div class="detail-item">
                                <span>平均逾期:</span>
                                <strong>${item.avgOverdueDays}天</strong>
                            </div>
                            <div class="progress-bar">
                                <div class="progress" style="width: ${getReceivedRate(item)}%">
                                    ${getReceivedRate(item).toFixed(1)}%
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>${renderLevelCell(item.level1Count, item.level1UnreceivedAmount, 1)}</td>
                    <td>${renderLevelCell(item.level2Count, item.level2UnreceivedAmount, 2)}</td>
                    <td>${renderLevelCell(item.level3Count, item.level3UnreceivedAmount, 3)}</td>
                    <td>${renderLevelCell(item.level4Count, item.level4UnreceivedAmount, 4)}</td>
                    <td>${renderLevelCell(item.level5Count, item.level5UnreceivedAmount, 5)}</td>
                    <td>
                        <span class="badge ${getRiskLevelClass(item.level5Count, item.level4Count)}">
                            ${getRiskLevel(item.level5Count, item.level4Count)}
                        </span>
                    </td>
                </tr>
            `).join('');
            
            tbody.innerHTML = rows;
        }
        
        // 渲染等级单元格
        function renderLevelCell(count, amount, level) {
            if (!count || count === 0) {
                return '<span style="color: #adb5bd;">-</span>';
            }
            return `
                <div class="detail-cell">
                    <div class="detail-item">
                        <span>订单:</span>
                        <strong>${count}</strong>
                    </div>
                    <div class="detail-item">
                        <span>金额:</span>
                        <span class="amount">¥${amount.toFixed(2)}</span>
                    </div>
                </div>
            `;
        }
        
        // 获取台账名称
        function getRegionName(regionId) {
            const regions = {0: '寿光', 1: '河北', 2: '聊城', 3: '云南'};
            return regions[regionId] || '未知';
        }
        
        // 获取预警级别名称
        function getAlertLevelName(level) {
            const levels = {1: '轻微', 2: '严重', 3: '紧急'};
            return levels[level] || '未知';
        }
        
        // 获取预警级别样式类
        function getAlertLevelClass(level) {
            if (level === 1) return 'badge-success';
            if (level === 2) return 'badge-warning';
            if (level === 3) return 'badge-danger';
            return '';
        }
        
        // 获取风险等级
        function getRiskLevel(level5Count, level4Count) {
            if (!level5Count || level5Count === 0) {
                if (level4Count && level4Count > 0) return '高';
                return '低';
            }
            if (level5Count >= 10) return '极高';
            if (level5Count >= 5) return '很高';
            return '高';
        }
        
        // 获取风险等级样式类
        function getRiskLevelClass(level5Count, level4Count) {
            const risk = getRiskLevel(level5Count, level4Count);
            if (risk === '极高' || risk === '很高') return 'badge-danger';
            if (risk === '高') return 'badge-warning';
            return 'badge-success';
        }
        
        // 获取回款率
        function getReceivedRate(item) {
            if (!item.totalOrderAmount || item.totalOrderAmount === 0) return 0;
            return (item.totalReceivedAmount / item.totalOrderAmount) * 100;
        }
        
        // 重置筛选条件
        function resetFilter() {
            document.getElementById('customerId').value = '';
            document.getElementById('customerName').value = '';
            document.getElementById('regionId').value = '';
            document.getElementById('startTime').value = '';
            document.getElementById('endTime').value = '';
            loadData();
        }
    </script>
</body>
</html>
